.setting{
  padding: 1.6rem;
  p{
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
}
.colors{
  width: 100%;
  display: flex;
  &::after{
    content: '';
    display: block;
    clear: both;
  }
  &:hover > span{
    opacity: .4;
  }
  span{
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    float: left;
    margin-right: 12px;
    z-index: 2;
    cursor: pointer;
    transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1);
    &.colorChoose::before{
      content: '';
      display: block;
      position: absolute;
      z-index: -1;
      top: -2px;
      left: -2px;
      border: 2px solid #fff;
      width: 34px;
      height: 34px;
      border-radius: 50%;
    }
    &:hover{
      opacity: 1;
      transform: scale(1.1)
    }
  }
}

@media screen and (max-width: 480px){
  .setting {
    width: calc(96vw - 3.2rem);
  }
}